<template>
  <div class="container">
      <p class="tittle">歌手推荐</p>
      <div class="singer-container">
        <div class="singer-list" v-for="singer in singerlist" :key="singer.id">
          <a href="#"><img :src="singer.src"></a>
          <a href="#"><p class="singername">{{singer.name}}</p></a>
        </div>
      </div>
  </div>
</template>

<script>

export default {
  name: 'singerList',

  data() {
    return {
      singerlist: [{
        src:'https://y.qq.com/music/photo_new/T001R300x300M000000GDDuQ3sGQiT.jpg?max_age=2592000',
        name: '王菲',
        id: '1'
      },
      {
        src: 'https://y.qq.com/music/photo_new/T001R500x500M000003DBAjk2MMfhR.jpg?max_age=2592000',
        name :'BLACKPINK',
        id: '2'
      },
      {
        src: 'https://y.qq.com/music/photo_new/T001R500x500M000000Sp0Bz4JXH0o.jpg?max_age=2592000',
        name :'五月天',
        id: '3'
      },
      {
        src: 'https://y.qq.com/music/photo_new/T001R300x300M000001t94rh4OpQn0.jpg?max_age=2592000',
        name :'双笙',
        id: '4'
      },
      {
        src: 'https://y.qq.com/music/photo_new/T001R500x500M000004WgCsE3KBddt.jpg?max_age=2592000',
        name :'陈粒',
        id: '5'
      },
      {
        src: 'https://y.qq.com/music/photo_new/T001R500x500M000003CoxJh1zFPpx.jpg?max_age=2592000',
        name :'Adele',
        id: '6'
      },
      {
        src: 'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
        name :'周杰伦',
        id: '7'
      },
      {
        src: 'https://y.qq.com/music/photo_new/T001R500x500M0000039EKtl4ec7wv.jpg?max_age=2592000',
        name :'Aimer (エメ)',
        id: '8'
      },
      {
        src: 'https://y.qq.com/music/photo_new/T001R300x300M000004UtSJN1sByso.jpg?max_age=2592000',
        name :'EnjiA魏恩佳',
        id: '9'
      },
      {
        src: 'https://y.qq.com/music/photo_new/T001R300x300M000000JhyXl2pIZJe.jpg?max_age=2592000',
        name :'中国人民解放军军乐团',
        id: '10'
      }]
    }
  },
}
</script>

<style scoped>
  .container{
    width: 1400px;
    height: 500px;
    background-color: #F7F7F8;
    position: absolute;
    left: calc((100vw - 1400px) / 2);
    top: 667px;
    border-top: 1px solid #F6F6F6;
  }
  .tittle{
    font-size: 25px;
    font-weight: 600;
  }
  .singer-container{
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    flex-wrap: wrap;
    align-content: flex-start;  
  }
.singer-list{
  width: 280px;
  height: 220px;
}

  .singer-container img{
    width: 160px;
    height: 160px;
    overflow: hidden;
    border-radius: 50%;
  }
  .singername{
    width: 160px;
    text-align: center;
    display: block;
    margin-top: 10px;
  }
  a{
    color: black;
  }
  a:hover{
  font-weight: 600;
  color: #56BBF1;
  }
</style>